<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/cssreset.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/about_us.css">
    <link rel="shortcut icon" href="../favicon.ico" />
    <script src="../js/iconfont.js"></script>
</head>
<body>
<!--头部-->
<header class="top">
    <div class="container top_logoAndlogin" id="langAndlogin">
        <div class="top_logo col-md-4 col-sm-4 col-xs-12">
            <img src="../images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
        </div>
        <div class="top_login col-md-8 col-sm-8 col-xs-12">
            <ul>
                <li class="uk">
                    <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                    <ol class="changelang">
                        <li><a href=""><span class="ico_one"></span>ireland</a></li>
                        <li><a href=""><span class="ico_two"></span>nederland</a></li>
                    </ol>
                </li>
                <li>
                    <a href="login.html" class="logincss">login</a>
                </li>
            </ul>
        </div>
    </div>
    <!--导航栏-->
    <nav class="container header_nav" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="../images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <!-- navbar-default灰色 navbar-fixed-bottom变成底部栏 -->
                <ul class="nav_left nav navbar-nav">
                    <!-- 鼠标移动颜色会发生变化 -->
                    <!-- active：在Home这里加了一个默认状态 -->
                    <li>
                        <a href="../index.html">subscribe</a>
                    </li>
                    <li><a href="shop.html">shop</a></li>
                    <li class="active"><a href="#">about</a></li>
                    <li><a href="UK_help.html">help</a></li>
                    <li><a href="#">rewards</a></li>
                    <li class="uk lang">
                        <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                        <ol class="changelang">
                            <li><a href=""><span class="ico_one"></span>ireland</a></li>
                            <li><a href=""><span class="ico_two"></span>nederland</a></li>
                        </ol>
                    </li>
                    <li class="login">
                        <a href="login.html" class="logincss">login</a>
                    </li>
                    <li id="startbtn">
                        <button class="btn btn-success">get started ></button>
                    </li>
                </ul>
                <div class="nav_right">
                    <button class="btn btn-success">get started ></button>
                </div>
            </div>
        </div>
    </nav>
</header>

<!--轮播+促销策略-->
<div class="banner">
    <div class="carousel_img col-md-12 col-sm-12 col-xs-12"></div>
</div>

<!--special code-->
<!--<div class="special_code col-md-12 col-sm-12 col-xs-12"></div>-->

<!--白色区域所有内容.pro-->
<div class="con container">
    <div class="works col-md-12 col-sm-12 col-xs-12">
        <h2>about graze</h2>
    </div>

    <div class="article col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="../images/about_us/header-mobile.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>our health promise</h2>
                <p>We believe the healthy choice shouldn't be a compromise on taste! We've found that using the best ingredients nature has to offer makes the best snacks, and we've got many delicious, wholesome creations for you to look forward to.</p>
                <button class="btn btn-success"> learn more</button>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="../images/about_us/how-graze-works.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>always new snacks to trys</h2>
                <p>We're on a never-ending hunt for healthier, juicier, crunchier, tastier, fresher, bigger, better! Which basically means we're always refreshing, rethinking and reinventing, so you can upgrade the way you snack!</p>
                <button class="btn btn-success"> learn more</button>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="../images/about_us/graze-sustainability.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>always new snacks to trys</h2>
                <p>We're on a never-ending hunt for healthier, juicier, crunchier, tastier, fresher, bigger, better! Which basically means we're always refreshing, rethinking and reinventing, so you can upgrade the way you snack!</p>
                <button class="btn btn-success"> learn more</button>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="../images/about_us/nation-of-grazers.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>tailored to your tastes</h2>
                <p>Imagine having taste experts on hand to select snacks for you! With a graze subscription you'll do exactly that, all you have to do is tell us what you like and we'll tailor the flavours of each box to suit you.</p>
                <button class="btn btn-success"> learn more</button>
            </div>
        </div>
    </div>
</div>

<div class="banner join_cont col-md-12 col-sm-12 col-xs-12">
    <div class="join_img"></div>
    <div class="banner_cont">
        <div>
            <h3>Discover new flavours and enjoy healthier choices on a regular basis, with personalised graze boxes delivered to your door.</h3>
            <a href=""><button class="btn btn-success">subscribe ></button></a>
        </div>
    </div>
</div>

<footer class="container col-md-12 col-sm-12 col-xs-12">
    <p class="svg_icon">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-facebook"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-twitter2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--instagram"></use>
        </svg>
    </p>
    <div class="footer_con">
        <ul class="title col-md-12 col-sm-12 col-xs-12">
            <li class="col-md-3 col-sm-6 col-xs-6">careers</li>
            <li class="col-md-3 col-sm-6 col-xs-6">how it works</li>
            <li class="col-md-3 col-sm-6 col-xs-6">health</li>
            <li class="col-md-3 col-sm-6 col-xs-6">gifts</li>
            <li class="col-md-3 col-sm-6 col-xs-6">wholesale</li>
            <li class="col-md-3 col-sm-6 col-xs-6">in stores</li>
            <li class="col-md-3 col-sm-6 col-xs-6">help</li>
        </ul>
        <ul class="des col-md-9 col-sm-11 col-xs-11 col-md-offset-3 col-sm-offset-1 col-xs-offset-1">
            <li><a>terms</a></li>
            <li><a>privacy</a></li>
            <li><a>cookies</a></li>
            <li><a>modern slavery statement</a></li>
            <li><a>students</a></li>
            <li><a>get in touch</a></li>
            <li><a>press</a></li>
            <li><a>grazelabs.com</a></li>
        </ul>
        <p class="col-md-12 col-sm-12 col-xs-12">© 2020 nature delivered ltd</p>
    </div>
</footer>
<div class="footer_color col-md-12 col-sm-12 col-xs-12">
    <!--        <img src="images/download.svg" alt="">-->
    <span></span>
</div>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/index.js"></script>
</body>
</html>